<!DOCTYPE html>
<html lang="en">
<!-- html头 -->
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    <!-- 引入css -->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
<!--  定义页面样式  -->
  <style type="text/css">
      /*body {background-color:red}*/
      form {color:green}
    </style>
<!--  <meta http-equiv="refresh" content="1">-->
<!--  引入外部的js库-->
  <script src="../lib/easyui/jquery.min.js"></script>
  <script src="../lib/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!-- 网页体-->

<!--<form>-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputEmail1" style="color:blue">Email address</label>-->
<!--    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputPassword1">Password</label>-->
<!--    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputFile">File input</label>-->
<!--    <input type="file" id="exampleInputFile">-->
<!--    <p class="help-block">Example block-level help text here.</p>-->
<!--  </div>-->
<!--  <div class="checkbox">-->
<!--    <label>-->
<!--      <input type="checkbox"> Check me out-->
<!--    </label>-->
<!--  </div>-->
<!--  <button type="submit" class="btn btn-default">Submit</button>-->
<!--</form>-->


<!--<hr>-->

<!--<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">-->
<!--  模态框-->
<!--</button>-->

<!--&lt;!&ndash; Modal &ndash;&gt;-->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--  <div class="modal-dialog" role="document">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--        <h4 class="modal-title" id="myModalLabel">Modal title</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        ...-->
<!--      </div>-->
<!--      <div class="modal-footer">-->
<!--        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
<!--        <button id="img1111" type="button" class="btn btn-primary">Save changes</button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->

<!--&lt;!&ndash;单标签&ndash;&gt;-->
<!--<hr>-->
<!--&lt;!&ndash;<p style="font-family:arial;color:red;font-size:20px;margin:100px;">一个段落1</p>&ndash;&gt;-->

<!--&lt;!&ndash;<p style="font-family:arial;color:red;font-size:20px;">一个段落2</p>&ndash;&gt;-->
<!--&lt;!&ndash;<p style="font-family:arial;color:red;font-size:20px;">一个段落3</p>&ndash;&gt;-->


<!--<img id="img1" src="https://www.runoob.com/images/pulpit.jpg" width="300" height="300" alt="没有图片" title="上海鲜花港 - 郁金香">-->
<!--<div class="table-responsive">-->
<!--<table class="table table-striped table-bordered table-hover table-condensed">-->
<!--  <thead>-->
<!--  <tr>-->
<!--    <th>列1</th>-->
<!--    <th>列2</th>-->
<!--    <th>列3</th>-->
<!--    <th>列4</th>-->
<!--  </tr>-->
<!--  </thead>-->
<!--  <tbody>-->
<!--  <tr class="success">-->
<!--    <td>数据11</td>-->
<!--    <td>数据12</td>-->
<!--    <td>数据13</td>-->
<!--    <td>数据14</td>-->
<!--  </tr>-->

<!--  <tr class="warning">-->
<!--    <td>数据21</td>-->
<!--    <td>数据22</td>-->
<!--    <td>数据23</td>-->
<!--    <td>数据24</td>-->
<!--  </tr>-->
<!--  </tbody>-->
<!--</table>-->
<!--  </div>-->

<!--  <form method="post" action="">-->
<!--    <div class="form-group">-->
<!--      <label>用户名</label>-->
<!--      <input type="text"  class="form-control"placeholder="请出入用户名">-->
<!--    </div>-->
<!--    <div class="form-group">-->
<!--      <label>密码</label>-->
<!--     <input type="password" class="form-control" placeholder="请输入密码">-->
<!--    </div>-->
<!--    <div class="form-group">-->
<!--      <button class="btn btn-default">登录</button><button>取消</button>-->
<!--    </div>-->

<!--  </form>-->


<!--<hr>-->
<!--<form class="form-inline">-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputName2">Name</label>-->
<!--    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <label for="exampleInputEmail2">Email</label>-->
<!--    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">-->
<!--  </div>-->
<!--  <button type="submit" class="btn btn-default">Send invitation</button>-->
<!--</form>-->

<!--<hr>-->
<!--<form class="form-horizontal">-->
<!--  <div class="form-group">-->
<!--    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>-->
<!--    <div class="col-sm-10">-->
<!--      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>-->
<!--    <div class="col-sm-10">-->
<!--      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <div class="col-sm-offset-2 col-sm-10">-->
<!--      <div class="checkbox">-->
<!--        <label>-->
<!--          <input type="checkbox"> Remember me-->
<!--        </label>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="form-group">-->
<!--    <div class="col-sm-offset-2 col-sm-10">-->
<!--      <button type="submit" class="btn btn-default">Sign in</button>-->
<!--    </div>-->
<!--  </div>-->
<!--</form>-->

<!--<div class="container">-->
<!--  <div class="row" style="margin-top:20px;">-->
<!--    <div class="col-md-6">-->
<!--      <div class="row">-->
<!--        <div class="col-sm-3 text-right">-->
<!--          <label class="control-label">用户名</label>-->
<!--        </div>-->
<!--        <div class="col-sm-8">-->
<!--          <input type="text" class="form-control" placeholder="请出入用户名">-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="col-md-6">-->
<!--      <label class="control-label">密码</label>-->
<!--      <input type="password" class="form-control" placeholder="请出入用户名">-->
<!--    </div>-->
<!--  </div>-->

<!--</div>-->

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

</body>
</html>